<?$this->load->view('member/tools/header');?>
		<div id="b">
			<article>
			<p class="highlight-3">
				<a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;
				<a href="materi.html">Materi</a>&nbsp;&nbsp;&nbsp;
			</p>
				<h1>HTML5 & CSS3 Template</h1>
				<img src="i/image-1.png" title="#H1#" />
				<h2>This W3C-compliant, CSS-based website template has a Creative Commons Attribution-Share Alike 3.0 Unported License.</h2>
				<p>Feel free to remix, copy, distribute and transmit this template. Just know that you must attribute the work in the manner specified by me. Please see the license. Also, if you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. All I ask is that you include a link back to <a href="http://www.jabz.info/contact/jonas-jared-jacek/" title="Profile of Jonas Jared Jacek">my website</a> in your credits.</p>
				<h3>Let the Show Begin - Pre and Code</h3>
				<p>This is how it looks if you use <code>pre</code> and <code>code</code> together, for example to highlight and nicely markup a piece of code:</p>
				<pre><code>pre {<br /> font-size : 12px;<br /> background : #F0F0F0;<br />}</code></pre>
				<h3>Example Blockquote</h3>
				<p>If you want to quote somebody, you can use this perfectly semantic example for a blockquote:</p>
				<cite>Jonas Jacek</cite>
				<blockquote cite="http://www.rield.com/">
				During my years in the Internet Marketing business I have seen and done many things I never thought would be of interest to me or anyone else.
				</blockquote>
				<h3>Examples Alerts, Notice  &amp; Confirmation</h3>
				<p>These sample styles for alerts and notices are useful if you want to use the template in content management systems.</p>
				<p class="highlight-1"><strong>Alert:</strong> This is how an alert looks like.</p>
				<p class="highlight-2"><strong>Notice:</strong> This is how a notice looks like.</p>
				<p class="highlight-3"><strong>Confirmation:</strong> This is how a confirmation looks like.</p>
				<h3>Example Table</h3>
				<p>The following is the design for a table. The style is simple and user-friendly. Some of the effects were made with CSS3.</p>
				<table>
					<caption>Mini HTML5 Reference Guide</caption>
					<tbody>
							<tr>
								<th>Tag</th>
								<th>Info</th>
								<th>Attributes</th>
							</tr>
						    	<tr>
								<td>&lt;abbr&gt;</td>
								<td>abbreviation</td>
								<td>global attributes**</td>
						    	</tr>
						    	<tr>
								<td>&lt;area&gt;</td>
								<td>in an image map</td>
								<td> alt, coords, href, hreflang, media, ping, rel, shape, target, type</td>
						    	</tr>
						    	<tr>
								<td>&lt;article&gt;</td>
								<td>article/ content</td>
								<td>global attributes**</td>
						    	</tr>
						    	<tr>
								<td>&lt;aside&gt;</td>
								<td>sidebar</td>
								<td>global attributes**</td>
						    	</tr>
						    	<tr>
								<td>&lt;audio&gt;</td>
								<td>sound content</td>
								<td>autobuffer, autoplay, controls, loop, src</td>
						    	</tr>
						    	<tr>
								<td>&lt;b&gt;</td>
								<td>bold text</td>
								<td>global attributes**</td>
							</tr>
						</tbody>
				</table>
				<h3>Example hCalendar</h3>
				<p>The following is a definition list in combination with the hCalendar microformat. </p>
				<dl class="vevent">
					<dt class="dtstart"><abbr title="2010-11-18" class="dtstart">11-18-2010</abbr></dt>
					<dd class="summary">Conference Name</dd>
					<dd><a href="#" class="url">http://www.conference-website.com/</a></dd>
					<dd class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec eleifend diam. Fusce lobortis odio ac sem scelerisque sed iaculis purus ornare.</dd>
				</dl>
				<h3>Example Video</h3>
				<p>You can put your Video-Files here...</p>
				<video src="movie.ogg" controls>your browser does not support the video tag</video>
				<h3>Example Audio</h3>
				<p>You can put your Audio-Files here...</p>
				<audio src="file.ogg" controls>your browser does not support the audio tag</audio>
				<h3>Example Lists</h3>
				<p>Two different kinds of lists were styled: Ordered lists (ol) and unordered (ul) lists.</p>
				<ol>
					<li>This is</li>
					<li>The Ordered</li>
					<li>Listing</li>
				</ol>
				<ul>
					<li>This is</li>
					<li>The Unordered</li>
					<li>Listing</li>
				</ul>
				<h3>Example Form</h3>
				<p>This is how a form will look like in this template.</p>
				<form action="#">
					<label>Name</label>
					<input name="#" type="text" value="Your Name">
					<label>Email</label>
					<input name="#" type="text" value="Your Email">
					<label>Your Comments</label>
					<textarea>This is a Comment...</textarea>
					<br>
					<input class="button" type="submit">
				</form>
				<section class="meta">
				<p>Author: <a href="http://www.jabz.info/contact/jonas-jared-jacek/">Jonas Jacek</a> | Date: 2010-01-21 | Comments: <a href="#">7</a></p>
				<p>Tags: <a href="#" rel="tag">quisquam</a>, <a href="#" rel="tag">Tags</a>, <a href="#" rel="tag">dolorem</a> <a href="#" rel="tag">Tags</a>, <a href="#" rel="tag">Tags</a></p>
				</section>
			</article>
			
			<?$this->load->view('member/tools/widget_left');?>
		</div>
<?$this->load->view('member/tools/footer');?>
